<template>
  <div class="app-container">
    <!--    表单查询区-->
    <div class="filter-container">
      <el-input
        v-model="listQuery.key"
        placeholder="课程名"
        style="width: 200px; margin-right: 10px"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
        @clear="handleFilter"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
      <el-button
        v-show="!$store.getters.roles.includes('teacher')"
        v-waves
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        批量导出
      </el-button>
    </div>

    <!--表格区-->
    <el-table
      v-loading="listLoading"
      :data="list"
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        label="ID"
        prop="id"
        align="center"
        width="80"
      />
      <el-table-column label="课程名" align="center">
        <template v-slot="{row}">
          <el-link type="primary" :underline="false" @click="handleCourseDetail(row)">{{ row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="教师" align="center">
        <template v-slot="{row}">
          <template v-for="item in row.teacherList">
            <el-tag
              v-if="item.realName !== '' && item.realName != null"
              :key="item.id"
              style="margin-right: 5px;"
            >{{ item.realName }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="classify" align="center" />
      <el-table-column label="适合年龄段" prop="age" align="center" />
      <el-table-column label="价格" prop="price" align="center" width="90px" />
      <el-table-column label="课程容量" prop="capacity" align="center" width="80px" />
      <el-table-column label="课程剩余" prop="surplus" align="center" width="80px" />
      <el-table-column v-if="!$store.getters.roles.includes('teacher')" label="课程状态" align="center" width="120px">
        <template v-slot="{row}">
          <el-select v-model="row.state" placeholder="请选择状态" @change="handleState(row)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template v-slot="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页插件-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

  </div>
</template>

<script>
import defaultSet from '@/settings'
import waves from '@/directive/waves' // 自定义 waves 指令
import Pagination from '@/components/Pagination'
import { delCourse, getPage, updateState } from '@/api/course'

const courseState = [
  {
    label: '未开课',
    value: 0
  },
  {
    label: '已开课',
    value: 1
  },
  {
    label: '已结课',
    value: 2
  }
]

export default {
  name: 'Index',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      // 课程列表
      list: [],
      // 总数
      total: 0,
      // 表格渲染标志
      listLoading: true,
      // 查询对象
      listQuery: {
        current: 1,
        size: 20,
        key: ''
      },
      downloadLoading: false,
      options: courseState
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取课程列表
    getList() {
      getPage(this.listQuery).then(res => {
        this.list = res.data.records
        this.total = res.data.total
        // 关闭加载渲染
        this.listLoading = false
      }).catch(() => {
        this.list = []
        // 请求错误，关闭加载渲染
        this.listLoading = false
      })
    },
    // 搜索处理函数
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    // 添加课程处理
    handleCreate() {
      this.$router.push('/course/add')
    },
    handleDownload() {
    },
    // 构建传递数据
    buildData(course) {
      // 1、构建上课时间
      if (course.classTime.length > 0) {
        const classTime = []
        course.classTime.forEach(item => {
          const t = {
            id: item.id,
            value: Number.parseInt(item.classTime + '000'),
            place: item.place
          }
          classTime.push(t)
        })
        course.classTime = classTime
      }
      // 2、体验时间
      if (course.experienceTime.length > 0) {
        course.experienceTime = Number.parseInt(course.experienceTime + '000')
      } else {
        course.experienceTime = ''
      }
      // 3、教师id
      course.teacherId = Number.parseInt(course.teacherId + '')
      // 4、开课结课时间
      if (course.startTime.length > 0 && course.finishTime.length > 0) {
        const startEndTime = []
        startEndTime.push(Number.parseInt(course.startTime + '000'))
        startEndTime.push(Number.parseInt(course.finishTime + '000'))
        course.startEndTime = startEndTime
      }
      // 上传文件封装
      if (course.rotationList.length > 0) {
        const rotationId = []
        course.rotationList.forEach(item => {
          const file = {
            id: item.id,
            url: defaultSet.fileUrl + '/' + item.url + '/' + item.code
          }
          rotationId.push(file)
        })
        course.rotationId = rotationId
      } else {
        course.rotationId = []
      }
      return course
    },
    // 跳转编辑课程页面
    handleUpdate(course) {
      // this.$store.commit('course/SET_COURSE', this.buildData(course))
      this.$router.push('/course/update?id=' + course.id)
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCourse(row.id).then(res => {
          this.$notify.success({
            title: '成功',
            message: res.msg,
            duration: 2000
          })
          this.getList()
        })
      }).catch(() => {
        this.$notify.info({
          title: '提示',
          message: '已取消删除',
          duration: 2000
        })
      })
    },
    handleState(row) {
      updateState(row).then(res => {
        this.$notify.success({
          title: '成功',
          message: res.msg,
          duration: 2000
        })
      }).catch(() => {
        this.getList()
      })
    },
    // 跳转课程详情页
    handleCourseDetail(course) {
      this.$router.push('/detail?csId=' + course.id)
    }
  }
}
</script>

<style scoped>

</style>
